<template>
  <div class="friends-filter">
    <!-- 筛选条件 -->
    <div class="search-condition">
      <el-input placeholder="请输入微信号" v-model="wechatNo" maxlength="20" show-word-limit clearable>
        <template slot="prepend">微信号:</template>
      </el-input>
      <el-input placeholder="请输入微信昵称" v-model="wechatNick" maxlength="15" show-word-limit clearable>
        <template slot="prepend">昵称:</template>
      </el-input>
      <el-input placeholder="请输入微信备注" v-model="wechatMemo" maxlength="25" show-word-limit clearable>
        <template slot="prepend">备注:</template>
      </el-input>
      <el-button @click="screenFriends">筛选</el-button>
    </div>
    <!-- 数据展示 -->
    <div class="friends-list">
      <el-table :data="tableData[currentPage-1]" stripe border highlight-current-row height="100%">
        <el-table-column type="index" :index="indexMethod" label="序号" width="60px"></el-table-column>
        <el-table-column label="所属微信">
          <template slot-scope="scope">
            <span
              v-text="wechatsMap[scope.row.WeChatId] ? wechatsMap[scope.row.WeChatId].WeChatNick:scope.row.WeChatId"
            ></span>
          </template>
        </el-table-column>
        <el-table-column label="微信号" prop="FriendNo"></el-table-column>
        <el-table-column label="昵称" prop="FriendNick"></el-table-column>
        <el-table-column label="头像" width="81px">
          <template slot-scope="scope">
            <el-image style="width: 60px; height: 60px" :src="scope.row.Avatar">
              <div slot="error" class="image-slot">
                <i style="font-size:50px;" class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="备注名" prop="Memo"></el-table-column>
        <el-table-column label="性别" prop="Gender" width="80px"></el-table-column>
        <el-table-column label="省市" prop="Province"></el-table-column>
        <el-table-column label="城市" prop="City"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              style="padding:5px"
              type="warning"
              @click="handleClick(scope.row)"
              size="small"
            >
              <i class="el-icon-delete" style="font-size:16px"></i>
            </el-button>
          </template>
        </el-table-column>
        <!-- 全选 -->
        <!-- <el-table-column width="100px" align="center">
          <template slot="header">
            <el-button size="mini" type="primary" @click="choseAllOfPage">全选本页</el-button>
          </template>
          <template slot-scope="scope">
            <input
              type="checkbox"
              :checked="computedCheckState(scope.row)"
              @click="choseRow(scope.row)"
            />
          </template>
        </el-table-column>-->
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[15, 30, 45, 60]"
        :page-size="pageSize"
        :pager-count="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import chineseCities from '@/utils/city.json'

export default {
  name: 'GroupAssistantSend',
  data() {
    return {
      wechatNo: '', // 微信号 6—20个字母、bai数字、下划线和du减号，必须以字母开头
      wechatNick: '', // 微信昵称 15个汉字(30个字符)
      wechatMemo: '', // 微信备注 25个汉字（50个数字或字母）
      // 分页
      pageSize: 15, // 每页消息数
      currentPage: 1, // 当前页
    }
  },
  computed: {
    ...mapGetters({
      wechats: 'conversation/wechats',
      searchResults: 'nedb/searchResults'
      //   groupSendRooms: 'nedb/groupSendRooms',
      //   groupSendLabels: 'nedb/groupSendLabels',
      //   groupSendFriends: 'nedb/groupSendFriends',
    }),
    // 信息总数
    totalNum() {
      return this.searchResults.length
    },
    // 表格中的数据
    tableData() {
      // 筛选出来的好友进行分组
      let size = this.pageSize
      let newFriends = []
      for (let i = 0; i < this.searchResults.length; i += size) {
        newFriends.push(this.searchResults.slice(i, i + size))
      }
      return newFriends
    },
    wechatsMap() {
      let wmap = {}
      for (const wechat of this.wechats) {
        wmap[wechat.WeChatId] = wechat
      }
      return wmap
    }
  },
  methods: {
    // 筛选好友
    screenFriends() {
      //   if (this.wechatNo || this.wechatMemo || this.wechatNick) {
      let msg = {}
      if (this.wechatNo) {
        msg.FriendNo = this.wechatNo
      }
      if (this.wechatMemo) {
        msg.Memo = this.wechatMemo
      }
      if (this.wechatNick) {
        msg.FriendNick = this.wechatNick
      }
      // console.log(msg)
      this.$store.dispatch('nedb/FindFriendsByConditions', msg)
    },
    handleClick(row) {
      //   console.log(row);
      this.$message.info('待实现')
    },
    // 重置
    // resetFilter() {
    //   this.wechat2send = ""
    //   this.gender2screen = ""
    //   this.lableRadio = "inclusion"
    //   this.labels2screen = []
    //   this.cities = []
    //   this.cityRadio = "inclusion"
    //   this.city2screen = []
    //   this.tableDataFriends = []
    // },
    // 计算序号
    indexMethod(index) {
      return index + 1;
    },
    // 选择row
    choseRow(row) {
      // 好友
      let friendId = row.FriendId
      let fid = this.friends2send.indexOf(friendId)
      fid >= 0 ? this.friends2send.splice(fid, 1) : this.friends2send.push(friendId)
    },
    // 该row是否被选中
    computedCheckState(row) {
      return this.friends2send.indexOf(row.FriendId) >= 0
    },
    // 本页全选
    choseAllOfPage() {
      let rows = this.tableData[this.currentPage - 1]
      let rowsArry = rows.map((x) => x.FriendId)
      let intersection = this.friends2send.filter(function (val) { return rowsArry.indexOf(val) > -1 })
      if (intersection.length === rowsArry.length) {
        for (const row of rows) {
          let friendId = row.FriendId
          let fid = this.friends2send.indexOf(friendId)
          this.friends2send.splice(fid, 1)
        }
      } else {
        for (const row of rows) {
          let friendId = row.FriendId
          let fid = this.friends2send.indexOf(friendId)
          if (fid < 0) {
            this.friends2send.push(friendId)
          }
        }
      }
    },
    // 修改pageSize
    handleSizeChange(val) {
      if (this.pageSize === val) return
      this.pageSize = val
    },
    // 修改当前页
    handleCurrentChange(val) {
      this.currentPage = val
    },
    // 重置表单
    resetForm(msgType) {
      if (msgType === "Link") {
        this.$refs['linkDialog'].resetFields();
      } else {
        this.$refs['weappDialog'].resetFields();
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.friends-filter {
  height: 100%;
  display: flex;
  flex-direction: column;

  .search-condition {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 5px;
    .el-input {
      margin-right: 10px;
      width: 350px;
    }
  }

  .friends-list {
    flex: 1 1 auto;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    .el-pagination {
      margin: 5px 0;
    }
  }
}
</style>
